import React from 'react'
import ReactDOM from 'react-dom'
/* 
  React.Fragment有点类似于vue的template

  你把标签 当作一种数据类型去对待

  类名需要写成className  
  但凡是解构中的变量  都要使用{} 抱起来

  vue中的v-if  一般使用三元表达式来实现

  vue中的v-for 使用数组 里边放置要展示的结构 一般使用map

  普通对象不能被用于html结构
  若是一个数组 那么就会把数组中的每一项罗列到当前结构中

  行内样式 要求编写的是必须是{对象}

*/
let a = 123;
let obj = { age: 123 }
let b = <b style={{ color: "red", fontSize: "30px" }}>加粗</b>
let i = <i>斜体</i>
let ary = [<i key='666'>1111</i>, 22, 3333, 444]
let persons = [{ name: "张三" }, { name: "张三2" }, { name: "张三3" }, { name: "张三4" }]
/* 
  <li v-for='item in persons'>{{item.name}}</li>

  [<li></li>]
*/
function fn() {
  if (a > 100) {
    return b
  } else {
    return i
  }
}
function fn2(arr) {
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    res.push(<li key={i}>{arr[i].name}</li>)
  }

  return res;
}
function App() {
  // let a = "hello";
  // console.log(obj)
  return (
    <>
      <h1 className={'box ' + a} >66---{a}</h1>
      <h2>888{ary}</h2>
      {
        a > 100 ? b : i
      }
      {
        fn()
      }
      <ul>
        {
          persons.map(item => <li key={item.name}>{item.name}</li>)
        }
        {fn2(persons)}
      </ul>
    </>
  )
}
ReactDOM.render(<App />, document.querySelector('#root'))